import React, { Component } from 'react';
import PubSub from 'pubsub-js';
import { meshLog, SPRemove, SPGet, SPSet } from '../../../config';
import { QMap, HeatMap, Marker, MarkerList, Info, TMap, Polyline } from 'react-tmap';
import ss from "../../../static/menu/runng.png";
import camera from "../../../config/camera.js";
import { getOnlineInfo } from '../../../api/index';
import './distribution.less';

export default class Distribution extends Component {
  constructor(props) {
    super(props);
    this.state = {
      onlineAll: 0,
      usertotle: 0,
      runInfo: [],
      OnlinelatAndlng: []
    };
    this.intervalId = null;
  }

  async componentDidMount() {
    meshLog("wjk scheduleSet", this.state.scheduleSet);
    const line = 670;
    let result = await getOnlineInfo(line)
    const { code, msg } = result
    if (code == 0) {
      let runInfo = msg.runInfo
      let userInfo = msg.UserInfo
      let onlineInfo = runInfo.map((item, index) => {
        return Object.assign({}, { lat: parseFloat(item.lat), lng: parseFloat(item.lng) });
      });
      // meshLog('onlineInfo', onlineInfo);
      // meshLog('runInfo', runInfo);
      //这边操作怎么修改用户实时经纬度
      this.setState({
        onlineAll: runInfo.length,
        usertotle: userInfo.length,
        OnlinelatAndlng: onlineInfo,
        runInfo: runInfo.slice(0, 24),

      })

    } else {
      meshLog('result', result);
      let errmsg = result.errmsg
      let UserInfo = errmsg.UserInfo
      this.setState({
        onlineAll: 0,
        usertotle: UserInfo.length,
        OnlinelatAndlng: [],
        runInfo: [],
      })
    }

    // 将函数定义为箭头函数，以保持正确的 `this` 上下文
    const myFunction = async () => {
      meshLog('有数据开始了',);
      const line = 670;
      let result = await getOnlineInfo(line)
      const { code, msg } = result
      if (code == 0) {
        let runInfo = msg.runInfo
        let userInfo = msg.UserInfo
        let onlineInfo = runInfo.map((item, index) => {
          return Object.assign({}, { lat: parseFloat(item.lat), lng: parseFloat(item.lng) });
        });
        // meshLog('onlineInfo', onlineInfo);
        // meshLog('runInfo', runInfo);
        //这边操作怎么修改用户实时经纬度
        this.setState({
          onlineAll: runInfo.length,
          usertotle: userInfo.length,
          OnlinelatAndlng: onlineInfo,
          runInfo: runInfo.slice(0, 24),

        })

      } else {
        meshLog('result', result);
        let errmsg = result.errmsg
        let UserInfo = errmsg.UserInfo
        this.setState({
          onlineAll: 0,
          usertotle: UserInfo.length,
          OnlinelatAndlng: [],
          runInfo: [],
        })
      }
    };

    this.intervalId = setInterval(myFunction, 10000);

    // 停止自动刷新，关闭定时器
    PubSub.unsubscribe("zidongdingshi");
    PubSub.subscribe('zidongdingshi', (msg, index) => {
      clearInterval(this.intervalId);
      meshLog('home.jsx 行 100秒自动刷新停止');
    });
  }

  componentWillUnmount() {
    if (this.intervalId) {
      clearInterval(this.intervalId);
    }
    PubSub.unsubscribe("zidongdingshi");
  }

  handleMarkerClick = (event) => {
    meshLog('map11', event);
  };

  render() {
    return (
      <div className="distribution">
        <div className="distributiondaohang">
          <span className='distributiondaohangzuo'>位置： 智慧夜跑 》用户分布</span>
        </div>
        <div className="distributionneirong">
          <div className="distributionneirong1" id="areaheight">
            <QMap
              mapStyleId="style1"
              center={{ lng: 120.69704733065794, lat: 31.31123852259022 }}
              style={{ height: '950px' }}
              zoom={15}
              events={{
                click: this.handleMarkerClick
              }}
            >
              <MarkerList
                showDecoration
                data={this.state.OnlinelatAndlng.slice(0, 300)}
                events={{
                  click: this.handleMarkerClick
                }}
                icon='https://swa.hglighting.net/message/marker1.png'
                zIndex={1}
              />
            </QMap>
          </div>
          <div className="distributionneirong2">
            <h2 style={{ marginTop: 40, marginLeft: -20 }}>用户总人数：{this.state.usertotle}个</h2>
            <h2 style={{ marginTop: 40, marginLeft: -20 }}>在线人数：{this.state.onlineAll}个</h2>

            {
              this.state.runInfo && this.state.runInfo.map((element, key) => {
                if (!element.children) {
                  return (
                    <h3 key={{ key }} >用户{key + 1}：{element.nickname}正在跑</h3>
                  )
                }
                else {
                  return (
                    <span>{element}</span>
                  )
                }
              })
            }
          </div>
        </div>
      </div>
    );
  }
}
